<template>
	<div class="dismantle1">
		<el-popover placement="left" trigger="click">
			<template :loading="loading">
				<!-- 随便给个data就行，否则无法弹出 -->
				<el-checkbox v-model="checked">全选</el-checkbox><br />
				<el-checkbox v-model="checked0">订单编号</el-checkbox><br />
				<el-checkbox v-model="checked6">订单状态</el-checkbox><br />
				<el-checkbox v-model="checked1">专利权人</el-checkbox><br />
				<el-checkbox v-model="checked2">发明人</el-checkbox><br />
				<el-checkbox v-model="checked3">专利名称</el-checkbox><br />
				<el-checkbox v-model="checked4">专利类型</el-checkbox><br />
				<el-checkbox v-model="checked5">代理人</el-checkbox><br />
				<!-- <el-checkbox v-model="checked8">提交时间</el-checkbox><br /> -->
				<el-checkbox v-model="checked7">备注信息</el-checkbox><br />
				<el-checkbox v-model="checked9">专属顾问</el-checkbox><br />
			</template>
			<el-button style="float: right;margin-bottom: 5px;margin-top: 0;" slot="reference" icon='el-icon-arrow-down'>显示字段</el-button>
		</el-popover>

		<!-- 列表查找 -->
		<span class="down-execel">
			<!-- <Icon type="ios-funnel-outline" /><a href="javascript:;">筛选条件</a> -->
			<Poptip v-model="showFilter" @on-popper-show ='getAllAgent'  placement="bottom-end">
				<!-- <Icon type="ios-funnel-outline" /> -->
				<i class="el-icon-search poptip-condition-add"></i>
				<a href="javascript:;">列表查找</a>
				<!-- <div slot="title"><i></i></div> -->
				<div slot="content">
					<Poptip v-model="showFilterCondition" placement="bottom-start" class='poptip-condition'>
						<i class="el-icon-plus poptip-condition-add"></i>
						<a href="javascript:;" class='poptip-condition-add'>添加过滤条件</a>

						<div slot="content" class="condition-list">
							<ul>
								<li v-for="(item, index) in columns" :key="index" class = 'poptip-condition-item' @click="addFilterCondition(item)">{{item.label}}</li>
							</ul>
						</div>
					</Poptip>

					<el-form :model="conditionForm" ref="conditionForm" label-width="120px" class="demo-dynamic" @submit.native.prevent>
						<el-form-item
								v-for="(condition, index) in conditionForm.condition"
								:label="condition.label"
								:key="condition.key"
								:prop="'condition.' + index + '.value'"
								:rules="{
									required: true, message: condition.label +'不能为空', trigger: 'blur'
								}"
							>
							<el-select v-if='condition.label === "订单状态"' v-model="condition.value" placeholder="流程状态" size="small">
								<el-option label="待接单" value="待接单"></el-option>
								<el-option label="代理人撰写中" value="代理人撰写中"></el-option>
								<el-option label="案件内审中" value="案件内审中"></el-option>
								<el-option label="案件修改中" value="案件修改中"></el-option>
								<el-option label="发明人确认定稿中" value="发明人确认定稿中"></el-option>
								<el-option label="上报文件上传中" value="上报文件上传中"></el-option>
								<el-option label="已撤案" value="已撤案"></el-option>
							</el-select>

							<el-autocomplete
								v-else-if='condition.label === "代理人"'
								v-model="formAgent.name"
								:fetch-suggestions="querySearch1"
								:trigger-on-focus="true"
								placeholder="请选择代理人"
								:validate-event='false'
								@input = 'changInput'
								@select="handleSelect1"
								size="small">
							</el-autocomplete>

							<el-autocomplete
								v-else-if='condition.label === "专属顾问"'
								v-model="formProcess.name"
								:fetch-suggestions="querySearch2"
								:trigger-on-focus="true"
								placeholder="请选择专属顾问"
								:validate-event='false'
								@input = 'changInput'
								@select="handleSelect2"
								size="small">
							</el-autocomplete>


							<el-select v-else-if='condition.label === "专利类型"' v-model="condition.value" placeholder="请选择专利类型" size="small">
								<el-option label="发明专利" value="发明专利"></el-option>
								<el-option label="实用新型" value="实用新型"></el-option>
								<el-option label="外观设计" value="外观设计"></el-option>
								<el-option label="不确定" value="不确定"></el-option>
							</el-select>

							<el-date-picker
								v-model="submitTime"
								type="daterange"
								placeholder="选择日期"
								value-format="yyyy-MM-dd"
								size="small"
								:validate-event='false'
								@input = 'changInput'
								v-else-if='condition.label === "提交时间"'>
							</el-date-picker>

							<el-input v-else size="small" v-model="condition.value" @keyup.enter.native="submitsearch('conditionForm')"></el-input>
							<el-button @click.stop="removeDomain(condition)" size="mini">删除</el-button>
						</el-form-item>
					</el-form>

					<div class= 'btns'>
						<el-button @click="submitsearch('conditionForm')" size="mini">查询</el-button>
						<el-button  @click.stop="resetForm('conditionForm')" size="mini">重置</el-button>
					</div>
				</div>
			</Poptip>
		</span>

		<el-table ref="orderTb"
			filters
			id="orderTable"
			:data="tableData"
			border
			style="width: 100%;"
			height="87%"
			v-loading="loading"
			@sort-change='tableSortChange'
			@row-click='selectRow'>
			<!-- @row-click="rowClick" -->
			<el-table-column show-overflow-tooltip prop="id" label="ID" width="60" align="center">
				<template slot-scope="scope">
					{{(scope.$index+1)+(currentPage-1)*tableSize}}
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked0" prop="order_number" label="订单编号" width="200" align="center" sortable='custom'>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked6" prop="status" label="订单状态" width="130" align="center" >
				<template slot-scope="scope">
					<div class="more">{{scope.row.status}}</div>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked4" prop="type" label="专利类型" width="120" align="center" sortable='custom'>
				<template slot-scope="scope">
					<div class="more">{{scope.row.type}}</div>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked3" prop="patent_name" label="专利名称" width="200" align="left" sortable='custom'>
				<template slot-scope="scope">
					<div class="more">{{scope.row.patent_name}}</div>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked1" prop="patent_user" label="专利权人" width="120" align="left" sortable='custom'>
				<template slot-scope="scope">
					<div class="more">{{scope.row.patent_user}}</div>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked2" prop="user_name" label="发明人" width="120" align="left" sortable='custom'>
				<template slot-scope="scope">
					<div class="more">{{scope.row.user_name}}</div>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked9" prop="process_id" label="专属顾问" width="120" align="center" sortable='custom'>
				<template slot-scope="scope">
					<!-- <div class="more">{{scope.row.process.name}}</div> -->
					<div class="more">
						<span v-if="scope.row.process && scope.row.process.email_work" > {{ scope.row.process.email_work.split("@")[0].split("followup")[1] }} </span>
						<!-- <Tooltip  v-if="scope.row.process"  content="点我留言">
							<i class="el-icon-chat-dot-round leaveWord" @click.stop="leaveWord(scope.row)"></i>
						</Tooltip> -->
					</div>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked5" prop="agent_id" label="代理人" width="120" align="center" sortable='custom'>
				<template slot-scope="scope">
					<span v-if="scope.row.agent" >{{ scope.row.agent | agentNumber }}</span>
					<!-- <Tooltip  v-if="scope.row.agent"  content="点我留言">
						<i class="el-icon-chat-dot-round leaveWord" @click.stop="leaveWordD(scope.row)"></i>
					</Tooltip> -->
      			</template>
			</el-table-column>

			<!-- <el-table-column show-overflow-tooltip v-if="checked8" prop="created_at" label="提交时间" sortable='custom' width="180" align="center">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.created_at }}</span>
				</template>
			</el-table-column> -->

			<!-- <el-table-column show-overflow-tooltip v-if="checked7" prop="remarks" label="撤案原因" width="200" align="center">
				<template slot-scope="scope">

				</template>
			</el-table-column> -->

			<el-table-column show-overflow-tooltip v-if="checked7" prop="remarks" label="备注信息" width="200" align="center">
				<template slot-scope="scope">
					<div class="more">{{scope.row.remarks}}</div>
				</template>
			</el-table-column>

			<!-- <el-table-column show-overflow-tooltip  :fixed="isFixed" min-width="110" align="right" >
				<template slot="header" slot-scope="scope">
					<span class="tableLastCol">操作</span>
				</template>
				<template slot-scope="scope">
					<div class='no-padding'>
						<el-button style="margin-bottom: 5px;" size="mini" type="primary" @click.stop="isInvoice(scope.$index, scope.row)"
						 v-if="!(scope.row.invoice_record && scope.row.invoice_record.invoice_number)" :disabled="(scope.row.invoice_record && scope.row.invoice_record.status=='等待开票')">申请开票</el-button>
						<el-button
							size="mini"
							v-if="(scope.row.invoice_record && scope.row.invoice_record.invoice_number)"
							type="warning"
						 	@click.stop="isRefund(scope.$index, scope.row,tableData[scope.$index].invoice_record.id)"
						 	:disabled="scope.row.invoice_record && (scope.row.invoice_record.refund=='等待退款' || scope.row.invoice_record.refund=='退款成功')">申请退款</el-button>
					</div>
				</template>
			</el-table-column> -->
		</el-table>

		<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="pageSizes" :page-size="Number(pageSize)" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<!-- 查看订单弹出框 -->
		<el-dialog title="查看订单" center @open='openLook' :modal='false' :visible.sync="showRefund3" class='lookOrder' :destroy-on-close='true'>

			<el-row :gutter="24">
				<el-col :span="12">
					<el-form :model="orderDetails" ref="lookorderDialog" label-width="120px" class='lookeOerderFrom'>
						<el-row type="flex">
							<el-col :span="12">
								<el-form-item label="专利名称：">{{ orderDetails.patent_name }}</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="专利类型：">{{ orderDetails.type }}</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="12">
								<el-form-item label="订单编号：">{{ orderDetails.order_number }}</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="状态：">
									<font :color='orderDetails.status == "已撤案" ? "red" : "green"'>{{ orderDetails.status }}</font>

								</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="12">
								<el-form-item label="代理人：">
									<span class="fontgreen" v-if='orderDetails.agent' >{{ orderDetails.agent.email_work.split("@")[0].slice(-3) }}号</span>
									<span v-else ></span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="专属顾问：">
									<span  class="fontgreen" v-if='orderDetails.process'>{{ orderDetails.process.email_work.split("@")[0].split("followup")[1] + '号' }}</span>
									<span v-else ></span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="12">
								<el-form-item label="专利权人：">{{ orderDetails.patent_user }}</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="发明人：">{{ orderDetails.user_name }}</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="12">
								<el-form-item label="身份证号：">{{ orderDetails.id_card }}</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="联络人：">{{ orderDetails.liaisons }}</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="12">
								<el-form-item label="联络人邮箱：">{{ orderDetails.liaisons_email }}</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="联络人电话：">{{ orderDetails.liaisons_tel }}</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="技术领域：">{{ orderDetails.territory }}</el-form-item>
						<el-form-item label="技术背景：">{{ orderDetails.background }}</el-form-item>
						<el-form-item label="技术问题：">{{ orderDetails.problem }}</el-form-item>
						<el-form-item label="技术方案：">{{ orderDetails.plan }}</el-form-item>
						<el-form-item label="项目优势：">{{ orderDetails.advantage }}</el-form-item>
						<el-form-item label="具体实施方式：">{{ orderDetails.way }}</el-form-item>
						<!-- <div v-if="scope.row.update_records && scope.row.update_records.length" class="more">{{scope.row.update_records[0].review}}</div> -->
						<el-form-item v-if="orderDetails.update_records && orderDetails.update_records.length" label="撤案原因：">
							<font color='red'>{{ orderDetails.update_records[orderDetails.update_records.length-1].review }}</font>

						</el-form-item>
						<el-row type="flex">
							<el-col :span="12" >
								<el-form-item label="附图：">
									<div v-if="orderDetails.img" class="file-box">
											<!-- <a class="el-icon-picture-outline file_sh" :href="baseUrl + '/api/download?path=' + '/' + orderDetails.img"
											:download="orderDetails.img" :title="orderDetails.img"></a> -->

										<a v-for="item in orderDetails.imgArr" :key="item.id" :href="baseUrl + '/api/download?path='  + item.file +'/'+ item.path"
											:download="item.path" :title="item.path" class="el-icon-picture-outline file_sh"></a>
									</div>
									<!-- {{ orderDetails.img }} -->
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<!-- <span>附件：</span>
								<span v-if='orderDetails.file'>{{ orderDetails.file }}</span>
								<span v-else>&nbsp;</span> -->
								<el-form-item label="附件：">
									<div class="file-box" v-if="orderDetails.file">
											<a v-for="item in orderDetails.fileArr" :key="item.id" :href="baseUrl + '/api/download?path='  + item.file +'/'+ item.path"
											:download="item.path" :title="item.path" class="el-icon-tickets file_sh"></a>
											<!-- <a class="el-icon-picture-outline file_sh" :href="baseUrl + '/api/download?path=' + '/' + orderDetails.file"
											:download="orderDetails.file" :title="orderDetails.file"></a> -->
									</div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-col>
				<el-col :span="12" class="lookOrder-right">
					<el-steps :active="opDateMax" align-center finish-status="success" process-status='wait'>
						<el-step v-for="(item,index) in stepsText" :title="item" description="" :key="index">
						</el-step>
					</el-steps>
					<br />
					<div class="lookOrder-right-collapse">
						<el-collapse accordion v-if="showOP">
						<el-collapse-item title="详细流程" name="1">
							<Timeline class="steps" style="padding: 10px 0 0 0;">
								<template v-for="(item, index) in opData">
									<Timeline-item color="blue" v-if="item.id==14" :key="index">
										{{item.pivot.created_at+'  '+'案件已撤案。'}}
									</Timeline-item>
									<Timeline-item color="blue" v-if="item.id==13" :key="index">
										{{item.pivot.created_at+'  '+'发明人确认定稿。'}}
									</Timeline-item>

									<Timeline-item color="blue" v-if="item.id==12" :key="index">
										<!-- {{item.pivot.created_at+'  '+'代理人变更为：'+order.agent.name}} -->
										{{item.pivot.created_at }} 代理人变更为： <span class="fontgreen" > {{ order.agent.email_work.split("@")[0].slice(-3) }}号</span>
									</Timeline-item>

									<Timeline-item color="blue" v-if="item.id==10" :key="index">
										{{ item.pivot.created_at }} 代理人：<span class="fontgreen" > {{ order.agent.email_work.split("@")[0].slice(-3) }} </span>，已发送定稿文件。
										<!-- {{item.pivot.created_at+'  '+'代理人：'+order.agent.name+'已发送定稿文件。'}} -->
									</Timeline-item>

									<Timeline-item color="blue" v-if="item.id==8" :key="index">
										{{item.pivot.created_at+'  '+'等待提交国知局。'}}
									</Timeline-item>

									<Timeline-item color="blue" v-if="item.id==7" :key="index">
										{{item.pivot.created_at+'  '+'案件定稿文件已上传。'}}
									</Timeline-item>

									<Timeline-item color="blue" v-if="item.id==5" :key="index">
										{{item.pivot.created_at+'  '+'案件内审未通过。'}}
									</Timeline-item>

									<Timeline-item color="blue" v-if="item.id==4" :key="index">
										{{item.pivot.created_at+'  '+'案件内审通过。'}}
									</Timeline-item>

									<Timeline-item color="blue" v-if="item.id==3" :key="index">
										{{item.pivot.created_at+'  '+'案件撰写完毕,内审中。'}}
									</Timeline-item>

									<Timeline-item color="blue" v-if="item.id==2" :key="index">
										<!-- {{item.pivot.created_at+'  '+'订单已分配代理人：'+ order.agent.name +',联系电话：'+order.agent.phone+'。案件撰写中。'}} -->
										{{ item.pivot.created_at }} 订单已分配代理人：<span class="fontgreen" >{{  order.agent.email_work.split("@")[0].slice(-3) }}号</span> 联系电话：{{ order.agent.phone }} 案件撰写中。
									</Timeline-item>

									<Timeline-item color="blue" v-if="item.id==1" :key="index">
										<!-- {{item.pivot.created_at+'  '+'提交成功,本次订单您的专属顾问是：'+order.process.email_work.split("@")[0].split("followup")[1]+'号, 联系电话：'+ order.process.phone + '。'}} -->
										{{ item.pivot.created_at }} 提交成功,本次订单您的专属顾问是：<span class="fontgreen" >{{ order.process.email_work.split("@")[0].split("followup")[1]+'号' }}</span> {{ '联系电话：'+ order.process.phone + '。' }}
									</Timeline-item>
								</template>
							</Timeline>
							<!-- <el-steps :space="35" class="steps" direction="vertical" :active="opData.length" align-center>
								<el-step v-for="item in opData" :title="item.pivot.created_at+'  '+item.name" description="">
								</el-step>
							</el-steps> -->
						</el-collapse-item>
					</el-collapse>
					</div>

				</el-col>
			</el-row>

		</el-dialog>

		<!-- 留言框 -->
		<!-- <el-dialog center title="留言" :visible.sync="showRefund4" @close='leaveWordClose' class="leaveWordDialog">
			<span class='leaveWord-label'>请输入你的留言</span>
			<el-input type="textarea" v-model="leaveWordText"></el-input>
			<el-button @click='submitLeaveWord' type="primary" size="small" :loading="isLeaveWord">确定</el-button>
			<el-button type="warning" size="small" @click="cancel">取消</el-button>
		</el-dialog> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
				checked0: true,
				checked1: true,
				checked2: true,
				checked3: true,
				checked4: true,
				checked5: true,
				checked6: true,
				checked7: true,
				checked8: true,
				checked9: true,
				loading: true,
				tableData: [],
				pageSizes: [25, 50],
				pageSize: 25,
				tableSize: 10, //一页几条
				tableStart: 0, //table数组过滤的第一条索引
				tableEnd: 10, //table数组过滤的最后一条索引
				currentPage: 1, //目前在第几页
				showOP: false,
				opData: [],
				opDateMax: 1, //状态里最大的id是多少
				stepsText: ['提交申请', '代理人接单', '案件撰写', '案件质控', '定稿文件发送中', '发明人定稿', '定稿文件上传', '递交国知局'],
				showInvoice: false,
				showInvoice2: false,
				invoiceArr: [],
				orderNumber: '',
				ruleForm: {
					name: '',
					phone: '',
					email: '',
					channel: '',
					taitou: '',
					invoice: '',
					add_tel: '',
					bank_card: '',
					money: '',
					send_addr:''
				},
				ruleForm2: {
					card: '',
					name: '',
					bank: ''
				},
				showRefund: false,
				showRefund2: false,
				showRefund3: false,
				showRefund4: false,
				refundID: '',
				refundIndex: '',
				isFixed: 'right',
				order_number: '',
				searchParam1: '',
				searchParam2: '',
				searchParam3: '',
				searchParam4: '',
				lastTime: 0,
				total: 0,
				order:{},
				orderDetails: {},
				leaveWordText: '',
				leaveWordId: '',
				//图片
				imgArr: [],
				//文件
				fileArr: [],
				baseUrl: global.baseurl,
				showFilter: false, // 控制显示筛选条件
				showFilterCondition: false,
				conditionForm: {
					condition: []
				},
				//筛选条件
				columns: [
					{
						label: '订单编号',
						id: 1,
						parameter: 'order_number',
					},
					{
						label: '专利类型',
						id: 6,
						parameter: 'type'
					},
					{
						label: '专利名称',
						id: 6,
						parameter: 'patent_name'
					},
					{
						label: '专利权人',
						id: 2,
						parameter: 'patent_user'
					},
					{
						label: '发明人',
						id: 3,
						parameter: 'user_name'
					},
					{
						label: '代理人',
						id: 4,
						parameter: 'agent_id'
					},
					{
						label: '专属顾问',
						id: 5,
						parameter: 'process_id'
					},


				],
				searchValue: '',
				// submitTime: [],
				formAgent: {},
				formProcess: {},
				LorD: '',
				paramsByOrder: {
					status: '已撤案'
				},
				leaveWordEmail: '',
				isLeaveWord: false
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				let that = this;
				//我的订单列表
				that.$axios.get('/api/consumer/order', {
					params: {
						status: '已撤案'
					}
				})
					.then(res => {
						that.loading = false;
						that.tableData = res.data.data;
						this.pageSize = res.data.page.per_page;
						this.tableSize = res.data.page.per_page;
						this.tableEnd = res.data.page.per_page;
						this.total = res.data.page.total;
					})
					.then(res => {
						//我的发票信息列表
						return that.$axios.get('/api/inv')
					})
					.then(res => {
						that.invoiceArr = res.data.data;
					})
			},
			isInvoice(index, row) {
				if (!this.showInvoice) {
					this.showRefund3 = false;
				}
				let that = this;
				this.$confirm('<div id="myOrder"><div class="tableTitle"><span class="midText">' +
						'<h3 class="center-title">开票申请须知</h3>' +
						'</span></div>' +
						'<center>' +
						'<b class="center-title2">（仅限已缴费用户使用<b class="center-title2">, 未缴费用户请勿申请</b>）</b>' +
						'</center>' +
						'<br />' +
						'<b class="center-title3">开票为电子普票，直接发送至开票者邮箱，请确保邮箱可以正常使用</b><br />' +
						'#有疑问请联系：严经理，13164620214</div>', '', {
							dangerouslyUseHTMLString: true,
							center: true,
							confirmButtonText: '申请开票',
							cancelButtonText: '取消'
						})
					.then(() => {
						that.invoice(index, row);
					})
					.catch(action => {})
			},
			isRefund(index, row, id) {
				let that = this;
				this.$confirm('<div id="myOrder"><div class="tableTitle"><span class="midText">' +
						'<h3 class="center-title">退费须知</h3>' +
						'</span></div>' +
						'<center>' +
						'<b class="center-title">（仅限已缴费用户使用<b class="center-title2">未缴费用户请勿申请</b>）</b>' +
						'</center>' +
						'<br />' +
						'<b class="center-title3">退费方式为原路返回，即退回到缴费渠道，例如用微信缴费，则退回到微信缴费账户；退费截图发送至联络人邮箱</b><br />' +
						'#有疑问请联系：严经理，13164620214</div>', '', {
							dangerouslyUseHTMLString: true,
							center: true,
							confirmButtonText: '申请退款',
							cancelButtonText: '取消'
						})
					.then(() => {
						that.refund(index, row, id);
					})
					.catch(action => {})
			},
			invoice(index, row) {
				this.orderNumber = this.tableData[index].order_number;
				this.ruleForm.name = this.tableData[index].liaisons;
				this.ruleForm.email = this.tableData[index].liaisons_email;
				this.ruleForm.phone = this.tableData[index].liaisons_tel;
				this.showInvoice = true;
			},
			submitForm(formName) {
				let that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.showInvoice2 = true;
					} else {
						return false;
					}
				});
			},
			submitForm3(formName) {
				let that = this;
				//效验通过
				that.$axios.post('/api/invoice', {
					consumer_id: that.$store.state.user.id,
					channel: that.ruleForm.channel,
					taitou: that.ruleForm.taitou,
					tariff_number: that.ruleForm.invoice,
					add_tel: that.ruleForm.add_tel,
					bank_card: that.ruleForm.bank_card,
					money: that.ruleForm.money,
					order_number: that.orderNumber,
					send_addr:that.ruleForm.send_addr
				}).then(res => {
					if (res.data.code == 200) {
						that.$message({
							message: '提交申请成功！',
							type: 'success'
						});
						this.getData()
					} else {
						that.$message({
							message: res.data.message,
							type: 'error'
						});
					}
					that.$refs[formName].resetFields();
					that.showInvoice = false;
					that.showInvoice2 = false;
				})

			},
			submitForm4(formName) {
				let that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.showRefund2 = true;
					} else {
						return false;
					}
				});
			},
			submitForm2(formName) {
				let that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						that.$axios.put('/api/consumer/refund/' + that.refundID, {
								invoiceRecord: that.refundID,
								card: that.ruleForm2.card,
								name: that.ruleForm2.name,
								bank: that.ruleForm2.bank,
							})
							.then(res => {
								if (res.data.code == 200) {
									that.$message({
										message: '申请退款成功，请等待处理结果！',
										type: 'success'
									});
									//不再显示对应列的“退款申请”按钮
									// this.tableData[this.refundIndex].invoice_record.invoice_number = null
									that.showRefund = false;
									that.showRefund2 = false;
									this.getData()
								} else {
									that.$message({
										message: res.data.message,
										type: 'error'
									});
								}
							})
					} else {
						return false;
					}
				});
			},
			refund(index, row, id) {
				this.showRefund = true;
				this.refundID = id;
				this.refundIndex = index;
				//this.tableData[index].invoice_record.refund = '等待退款';
			},
			//选择一页几条
			handleSizeChange(size) {
				this.paramsByOrder.perPage = size
				this.paramsByOrder.page = 1
				this.$axios.get('/api/consumer/order',{
					params: this.paramsByOrder
					}
				)
				.then(res => {
					this.loading = false;
					this.tableData = res.data.data;
					this.pageSize = res.data.page.per_page;
					this.tableSize = res.data.page.per_page;
					this.tableEnd = res.data.page.per_page;
					this.total = res.data.page.total;
				})
			},
			// 图片， 文件 分组
			imgs (data) {
				if (data.img == null || data.img == "") {} else {
					let img_Arr = data.img.split("&");
					data.imgArr = [];
					for (const i in img_Arr) {
						let itemobj = {
							id: i + 1,
							path: img_Arr[i],
							file: ''
						};
						let itemArr = itemobj.path.split("/")
						itemobj.path = itemArr[itemArr.length - 1]
						itemobj.file = itemArr.slice(0, 2).join("/");
						data.imgArr.push(itemobj);
					}
      	}

				//文件 切分组件
				if (data.file == null || data.file == "") {} else {
					let file_Arr = data.file.split("&");
					data.fileArr = [];
					for (const i in file_Arr) {
						let itemobj = {
							id: i + 1,
							path: file_Arr[i],
							file: ''
						};
						let itemArr = itemobj.path.split("/")
						itemobj.path = itemArr[itemArr.length - 1]
						itemobj.file = itemArr.slice(0, 2).join("/");
						data.fileArr.push(itemobj);
					}
				}
			},
			//获取所有代理人
			getAllAgent() {
				this.$axios.get('api/user/agent')
				.then(res => {
					if (res.data.code == 200) {
						let arr = res.data.data;
						for (let key in arr) {
							//element的模糊匹配组件el-autocomplete指定：必须数组的每个元素是个对象，并且有value属性
							arr[key].value = arr[key].email_work.split("@")[0].slice(-3)
						}
						this.restaurants = arr;
					}
				})
				.catch(err => {
					this.$message({
						type: "err",
						message: err
					});
				})

				this.$axios.get('api/user/process')
        .then(res => {
          if (res.data.code == 200) {
            let arr = res.data.data;
            for (let key in arr) {
              //element的模糊匹配组件el-autocomplete指定：必须数组的每个元素是个对象，并且有value属性
              arr[key].value = arr[key].email_work.split("@")[0].split("followup")[1];
            }
						this.restaurants2 = arr;
          }
        })
        .catch(err => {
          this.$message({
            type: "err",
            message: err
          })
        })

			},
			querySearch(queryString, cb) {
				let restaurants = this.invoiceArr;
				let results = [];
				if (restaurants.length > 0) {
					for (let i in restaurants) {
						restaurants[i].value = restaurants[i].taitou
					}
					results = queryString ?
						restaurants.filter(this.createFilter(queryString)) :
						restaurants;
				}
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			//税号模糊匹配
			querySearchBytariff(queryString, cb) {
				let restaurants = this.invoiceArr;
				let results = [];
				if (restaurants.length > 0) {
					//value改为税号
					for (let i in restaurants) {
						restaurants[i].value = restaurants[i].tariff_number
					}
					results = queryString ?
						restaurants.filter(this.createFilter(queryString)) :
						restaurants;
				}
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			querySearch1(queryString, cb) {
				let that = this;
				let restaurants = this.restaurants;
				let results = [];
				if (restaurants.length > 0) {
					results = queryString ? restaurants.filter(that.createFilter(queryString)) : restaurants;
				}
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			// 流程模糊匹配
			querySearch2(queryString, cb) {
				let that = this;
				let restaurants = this.restaurants2;
				let results = [];
				if (restaurants.length > 0) {
					results = queryString ? restaurants.filter(that.createFilter(queryString)) : restaurants;
				}
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			//匹配
			createFilter(queryString) {
				return restaurant => {
					return (
						restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
					);
				};
			},
			//模糊匹配赋值
			handleSelect(item) {
				this.ruleForm.taitou = item.taitou;
				this.ruleForm.invoice = item.tariff_number;
			},
			handleSelect1(item) {
				this.formAgent.id = item.id
				this.$refs['conditionForm'].clearValidate()
			},
			handleSelect2(item) {
				this.formProcess.id = item.id
				this.$refs['conditionForm'].clearValidate()
			},

			handleCurrentChange(val) {
				this.currentPage = val;
				let that = this;
				let params = this.paramsByOrder

				let page = val;
				that.$axios.get('/api/consumer/order?page=' + page,{
					params
				})
				.then(res => {
					that.loading = false;
					that.tableData = res.data.data;
					this.pageSize = res.data.page.per_page;
					this.tableSize = res.data.page.per_page;
					this.tableEnd = res.data.page.per_page;
					this.total = res.data.page.total;
				})
			},
			selectRow (row, column, event) {
				if(window.getSelection().toString() === ''){
					this.orderDetails = row
					this.imgs(this.orderDetails)
					this.order = row
					let opData = [];

					opData.push(...row.statuss);
					// ①opData数组按每个元素的“created_at”属性（即按时间）降序
					// let dateToTime = function(str) {
					// 	return (new Date(str.replace(/-/g, '/'))).getTime(); //用/替换日期中的-是为了解决Safari的兼容
					// }
					// for (let i = 0; i < opData.length; i++) {
					// 	opData[i].publishTimeNew = dateToTime(opData[i].pivot.created_at);
					// }
					// opData.sort(function(a, b) {
					// 	return b.publishTimeNew > a.publishTimeNew ? 1 : -1;
					// });
					// 数组倒序（降序改升序）
					//opData.reverse();
					this.opData = [];
					this.opData.push(...opData);
					let opData2Temp = [];
					for(let i in row.statuss){
						let obj = {
							id:row.statuss[i].id,
							name:row.statuss[i].name,
							created_at:row.statuss[i].created_at
						}
						let pivot = {}
						for(let m in row.statuss[i].pivot){
							pivot[m] = row.statuss[i].pivot[m]
						}
						obj.pivot = pivot;
						opData2Temp.push(obj);
					}
					//this.opData.push(...opData2Temp)
					//②opData数组按每个元素的“id”属性升序
					let opData2 = [];
					opData2.push(...opData2Temp);
					opData2.reverse()


					let opDateMax = opData2.length - 1;
					for (let i = opDateMax; i >= 0; i--) {

						if (opData2[i].id == 8) {
							this.opDateMax = 7;
							break;
						} else if (opData2[i].id == 7) {
							this.opDateMax = 6;
							break;
						} else if (opData2[i].id == 13) {
							this.opDateMax = 5;
							break;
						} else if (opData2[i].id == 4) {
							this.opDateMax = 4;
							break;
						} else if (opData2[i].id == 3) {
							this.opDateMax = 3;
							break;
						} else if (opData2[i].id == 2) {
							this.opDateMax = 2;
							break;
						} else if (opData2[i].id == 1) {
							this.opDateMax = 1;
							break;
						}
					}
					this.showOP = true;
					this.showRefund3 = true;
				}
			},
			leaveWord (row) {
				this.showRefund4 = true;
				this.showRefund3 = false;
				this.leaveWordId = row.id
				this.LorD = '客服专员'
				this.leaveWordEmail = row.process.email_work
			},
			leaveWordD (row) {
				this.showRefund4 = true;
				this.showRefund3 = false;
				this.leaveWordId = row.id
				if(row.agent) {
					this.leaveWordEmail = row.agent.email_work
				}
			},
			openLook(row) {
				if (this.showRefund4) {
					this.showRefund3 = false;
					this.leaveWordId = row.id
				}
			},
			submitLeaveWord () {
				let that = this
				let submitLeaveWordOrder = {
					message: that.leaveWordText,
					id: that.leaveWordId
				}
				let url = ``
				if(this.LorD === '客服专员') {
					url = `api/consumer/${that.leaveWordId}/process/message`
				} else {
					url = `api/consumer/${that.leaveWordId}/message`
				}
				that.$axios.post(url, submitLeaveWordOrder)
				.then(({ data }) => {
					if (data.code == 200) {
						this.showRefund4 = false;
						// this.$message({
						// 	message: '留言成功',
						// 	type: 'success'
						// });
						this.$alert(`留言成功, 已发送至${that.leaveWordEmail}邮箱。24小时答复你！`, '提示', {
							confirmButtonText: '确定',
							center: true,
							callback: action => {
							}
						})
					} else {
						this.$message.error(data.message);
					}
				})
				this.LorD = ''
			},
			leaveWordClose () {
				this.leaveWordText = ''
				this.submitLeaveWordOrder = null
			},
			addFilterCondition (item) {
				let filterItem = {
					value: '',
					label: item.label,
					parameter: item.parameter,
					key: Date.now()
				}
				if (this.conditionForm.condition.length > 0) {
					let conditionlabels = []
					for(let i = 0; i < this.conditionForm.condition.length; i++) {
						conditionlabels.push(this.conditionForm.condition[i].label)
					}
					let Check = conditionlabels.indexOf(item.label)
					Check == -1 ? this.conditionForm.condition.push(filterItem) : this.$message.error('请勿重复添加')
				} else {
					this.conditionForm.condition.push(filterItem)
				}
				this.showFilterCondition = false;
			},
			search1() {
				this.currentPage = 1
				for(var i = 0; i < this.conditionForm.condition.length; i++) {
					let a = this.conditionForm.condition[i].parameter
					this.paramsByOrder[a] = this.conditionForm.condition[i].value
				}
				let agentNames = []
				for(let j = 0; j < this.restaurants.length; j++) {
					agentNames.push(this.restaurants[j].value)
				}
				let agentV = agentNames.indexOf(this.formAgent.name)
				agentV === -1 ? this.paramsByOrder.agent_id = this.formAgent.id: this.paramsByOrder.agent_id = this.restaurants[agentV].id

				let processNames = []
				for(let z = 0; z < this.restaurants2.length; z++) {
					processNames.push(this.restaurants2[z].value)
				}
				let processV = processNames.indexOf(this.formProcess.name)
				processV === -1 ? this.paramsByOrder.process_id = this.formProcess.id: this.paramsByOrder. process_id = this.restaurants2[processV].id

				// 处理分页数据
				delete this.paramsByOrder.page

				// 处理排序状态
				delete this.paramsByOrder.sort_str
				delete this.paramsByOrder.sort_order
				this.$refs['orderTb'].clearSort()

				let that = this
				//我的订单列表
				that.loading = true
				that.$axios.get('/api/consumer/order', {
					params: this.paramsByOrder
				})
				.then(res => {
					that.loading = false
					that.tableData = res.data.data
					this.pageSize = res.data.page.per_page
					this.tableSize = res.data.page.per_page
					this.tableEnd = res.data.page.per_page
          this.total = res.data.page.total
          this.showFilter = false
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields()
				this.$refs['orderTb'].clearSort()
				this.conditionForm.condition = []
				this.formAgent = {}
				this.paramsByOrder = {
					status: '已撤案'
				}
				// this.submitTime = []
				this.formAgent = {}
				this.formProcess = {}
				// this.getData()
				// this.showFilter = false
				// this.showFilterCondition = false
			},
			submitsearch(formName) {
					let that = this
					this.$refs[formName].validate((valid, prop) => {
					// this.$refs[formName].clearValidate();
						let props = []
						for (let k in prop) {
							props.push(prop[k][0].field)
							if (prop[k][0].message = '代理人不能为空') {
								if(this.formAgent.name) {
									that.$refs[formName].clearValidate([prop[k][0].field])
									// that.search()
									let timeIndex = props.indexOf('代理人不能为空')
									props.splice(timeIndex, 1)
								}
							}
							if (prop[k][0].message = '流程人员不能为空') {
								if (this.formProcess.name) {
									that.$refs[formName].clearValidate([prop[k][0].field])
									// that.search()
									let timeIndex = props.indexOf('流程人员不能为空')
									props.splice(timeIndex, 1)
								}
							}
						}
						if (props.length) {
							that.$refs[formName].validateField(props, (valid2) => {
								if(valid2) {
									return false;
								} else {
									that.search1()
								}

							})
						} else {
							that.search1()
						}
					})
			},
			removeDomain(item) {
				this.showFilter = true
				delete this.paramsByOrder[item.parameter]
				let index = this.conditionForm.condition.indexOf(item)
				if (index !== -1) {
					this.conditionForm.condition[index] = []
					this.conditionForm.condition.splice(index, 1)
				}
				if (item.label === '代理人') {
					this.formAgent = {}
				}
				if (item.label === '专属顾问') {
					this.formProcess = {}
				}
				// if (item.label === '提交时间') {
				// 	this.submitTime = []
      	// }
			},
			changInput () {
				this.$refs['conditionForm'].clearValidate();
			},
			// 表格排序
			tableSortChange(column) {
				if (column.order === 'descending') {
					this.paramsByOrder.sort_str = column.prop
					this.paramsByOrder.sort_order = 'desc'
				} else if (column.order === 'ascending'){
					this.paramsByOrder.sort_str = column.prop
					this.paramsByOrder.sort_order = 'asc'
				} else {
					delete this.paramsByOrder.sort_str
					delete this.paramsByOrder.sort_order
				}
				this.loading = true
				this.$axios.get('/api/consumer/order', {
					params: this.paramsByOrder
				})
				.then(res => {
					this.loading = false
					this.tableData = res.data.data
					this.pageSize = res.data.page.per_page
					this.tableSize = res.data.page.per_page
					this.tableEnd = res.data.page.per_page
					this.total = res.data.page.total
				})
		  }
		},
		updated() {
			let noP = document.getElementsByClassName('no-padding');
			for (let i = 0; i < noP.length; i++) {
				if (noP[i].parentNode && noP[i].parentNode.parentNode) {
					noP[i].parentNode.parentNode.style.padding = 0;
				}
			}
		},
		//配合.el-table{width:99.9%!important;}防止筛选抖动
		beforeUpdate() {
			this.$nextTick(() => {
				this.$refs.orderTb.doLayout();
			});
		},
		watch: {
			checked(val, Oval) {
				if (val) {
					this.checked0 = true;
					this.checked1 = true;
					this.checked2 = true;
					this.checked3 = true;
					this.checked4 = true;
					this.checked5 = true;
					this.checked6 = true;
					this.checked7 = true;
					this.checked9 = true;
				} else {
					this.checked0 = false;
					this.checked1 = false;
					this.checked2 = false;
					this.checked3 = false;
					this.checked4 = false;
					this.checked5 = false;
					this.checked6 = false;
					this.checked7 = false;
					this.checked9 = false;
				}
			},
			showInvoice(val, Oval){
				if(!val){
					this.ruleForm = {
						name: '',
						phone: '',
						email: '',
						channel: '',
						taitou: '',
						invoice: '',
						add_tel: '',
						bank_card: '',
						money: ''
					}
					this.$nextTick(function(){
						this.$refs['ruleForm'].clearValidate();
					})
				}
			},
			//配合lastTime，使用节流函数调用搜索方法。间隔2秒
			// searchParam1(val, Oval) {
			// 	let that = this;
			// 	if (this.lastTime == 0) {
			// 		this.lastTime = setTimeout(() => {
			// 			that.search();
			// 		}, 2000)
			// 	} else {
			// 		clearTimeout(this.lastTime)
			// 		this.lastTime = setTimeout(() => {
			// 			that.search();
			// 		}, 2000)
			// 	}
			// },
			// searchParam2(val, Oval) {
			// 	let that = this;
			// 	if (this.lastTime == 0) {
			// 		this.lastTime = setTimeout(() => {
			// 			that.search();
			// 		}, 2000)
			// 	} else {
			// 		clearTimeout(this.lastTime)
			// 		this.lastTime = setTimeout(() => {
			// 			that.search();
			// 		}, 2000)
			// 	}
			// },
			// searchParam3(val, Oval) {
			// 	let that = this;
			// 	if (this.lastTime == 0) {
			// 		this.lastTime = setTimeout(() => {
			// 			that.search();
			// 		}, 2000)
			// 	} else {
			// 		clearTimeout(this.lastTime)
			// 		this.lastTime = setTimeout(() => {
			// 			that.search();
			// 		}, 2000)
			// 	}
			// },
			// searchParam4(val, Oval) {
			// 	let that = this;
			// 	if (this.lastTime == 0) {
			// 		this.lastTime = setTimeout(() => {
			// 			that.search();
			// 		}, 2000)
			// 	} else {
			// 		clearTimeout(this.lastTime)
			// 		this.lastTime = setTimeout(() => {
			// 			that.search();
			// 		}, 2000)
			// 	}
			// }
		}
	}
</script>

<style lang="less" >
	.dismantle1 {
		height: 100%; //撑满表格
		.clearfix:after{
			content:"";
			height:0;
			display:block;
			clear:both;
		}
		.clearfix{
				zoom:1;
		}
		.el-step__head{
			&.is-wait{
				.el-step__icon {
					&.is-text{
						.el-step__icon-inner{
							display: none; //不要序号
						}
					}
				}
			}
		}
		.ivu-timeline-item-content{
			font-size: 15px!important;//字体放大点
			top: -9px;
		}
		.ivu-timeline-item-tail{
			border-left: 2px dashed #e8eaec;
		}
		.ivu-timeline-item-head-blue{
			margin-left: 3px;
			width: 8px;
			height: 8px;
			background: #2d8cf0;
		}
		.el-range-separator {
			width: 60px;
		}

		.card {
			margin: 20px 0;
			clear: both;
		}

		.search-input {
			width: 200px;
		}
		.leaveWordDialog {
			.el-dialog {
				width: 35%;
			}
			.leaveWord-label {
				display: block;
				margin-bottom: 10px;
			}
			.el-textarea {
				display: block;
				margin-bottom: 20px;
			}
		}
		.el-table {
			width: 99.9% !important;

			.el-table__header-wrapper{
				.has-gutter{
					.el-table__header{
						th:last-child {
							padding-right: 25px ;
						}
					}
				}

			}
		}
		.hr {
			border: 1px solid #c5cfdb;
		}

		.steps {
			margin-left: 20px;
		}

		.center-title {
			color: rgb(240, 173, 78);
			font-weight: bold;
		}

		.center-title2 {
			color: rgb(23, 140, 223);
			font-weight: bold;
		}

		.center-title3 {
			color: rgb(217, 83, 79);
			font-weight: bold;
		}

		.demo-ruleForm {
			margin-top: 20px;
		}

		.required-tag {
			color: #d9534f;
		}

		.submit-btn {
			margin-top: 50px;
		}

		.pagination {
			margin-top: 30px;
		}

		.tableTitle {
			position: relative;
			margin: 30px auto;
			// width: 600px;
			height: 1px;
			background-color: #d4d4d4;
			text-align: center;
			font-size: 16px;
			color: rgba(101, 101, 101, 1);
		}
		.midText {
			position: absolute;
			left: 50%;
			background-color: #ffffff;
			padding: 0 15px;
			transform: translateX(-50%) translateY(-50%);
		}
		.el-steps--vertical {
			width: 420px;
			margin: 0 auto;
		}
		.more {
			display: block;
			/* width: 31em; */
			word-break: keep-all;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.el-step__icon {
			width: 24px;
		}
		.applyBilling {
			.demo-ruleForm{
				.el-select {
					width: 100%;
				}
				.el-autocomplete{
					width: 100%;
				}
			}
		}
		.lookeOerderFrom {
			.el-form-item {
				height: 100%;
				border: 1px solid #ccc;
				margin-right: -1px;
				margin-bottom: -1px;

				.el-form-item__label {
					line-height: 30px;
				}
				.el-form-item__content{
					line-height: 30px;

				}

				.el-col {
					.el-col-12 {
						.el-form-item {
							border-bottom-width: 0;
						}
					}
				}

			}
		}
		.file_sh {
			font-size: 20px;
			margin-right: 40px;
		}
	}

	.poptip-condition {
		display: block;
		margin-top: 10px;
		.poptip-condition-item {
			line-height: 25px;
			cursor:pointer;
		}
		.poptip-condition-add {
			font-size: 14px;
		}
	}
	.leaveWord {
		color: rgb(16, 133, 16);
		font-size: 18px;
	}
	.demo-dynamic {
		padding-left: 10px;
		.el-form-item {
			margin-bottom: 12px;
		}
		.el-input {
			width: 240px;
		}
		.el-date-editor {
			width: 240px;
		}
		.el-button {
			padding: 9px 15px;
			vertical-align: baseline;
		}
		.el-form-item__error {
			padding-top: 0 ;
		}
	}
	.el-main .ivu-poptip .ivu-poptip-popper .ivu-poptip-content .ivu-poptip-inner{
		min-width: 480px ;
		// height: 300px;
		overflow-y:scroll;
	}
	.el-main .poptip-condition .ivu-poptip-popper .ivu-poptip-content .ivu-poptip-inner {
		min-width: 180px;
	}
	.down-execel {
		display: block;
		height: 40px;
		line-height: 40px;
		color: #333333;
		font-size: 14px;
		float: right;
		margin-right: 20px;
	}
	.btns {
		margin-top: 10px;
	}
	.tableLastCol {
    padding-right: 25px;
	}
	.fontgreen {
		color: rgb(73, 150, 124);
		font-weight: 700;
	}
	.el-steps {
		.el-step__main{
			min-width: 90px;
			.el-step__title {
				text-align: center;
				font-size: 15px;
			}
		}
		.el-step:nth-child(odd) {
			.el-step__main{
				position: absolute;
				top: -40px;
			}
		}
	}
	.lookOrder {
		overflow-y:scroll ;
		.lookOrder-left {
			float: left;
			width: 50%;

		}
		.lookOrder-right {
			padding-left: 20px !important;
			box-sizing: border-box;
			.lookOrder-right-collapse {
				padding-left: 20px;
			}
		}
		.el-dialog{
			// min-width: 1500px ;
			width: 95%;
		}

		.el-col {
			// padding-left: 10px;
			line-height: 35px;
		}
		.textslineH{
			line-height: 25px !important;
		}
	}
	.file-box {
		-webkit-display:flex;
		height: 30px;
		display:flex;
		-webkit-align-items:center;
		align-items:center;
		-webkit-justify-content:left;
		justify-content:left;
	}
</style>
